<template>
  <div class="air">
    <el-row :gutter="20">
        <el-col :span="24" class="paddCol" >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span v-if="this.alarmstate != 0 && this.alarmstate != 3" style="color:#ea2e2e"><i class="el-icon-menu"></i> <span class="shebeiname">{{this.data.name}} (离线)</span></span>
                <span v-if="this.alarmstate == 0 || this.alarmstate == 3"><i class="el-icon-menu"></i> <span class="shebeiname">{{this.data.name}}</span></span>
              </div>
              <div class="temp_card">
                <div class="temp_data">
                  <div class="temp_datal">
                    <div class="device_border">
                      <div class="airclean_top">
                        <div class="device_data">
                          <div class="deac_left">
                            <img src="../../assets/pan5.png" alt="" v-if="this.data.unit[0].value < 1">
                            <img src="../../assets/pan6.png" alt="" v-if="this.data.unit[0].value == 1">
                            <img src="../../assets/pan7.png" alt="" v-if="this.data.unit[0].value > 1">
                            <div class="deac_left_img">
                              <p class="deac_left_title">酸性气体</p>
                              <p class="deac_left_value">{{ parseFloat(this.data.unit[2].value).toFixed(0) }}</p>
                              <p class="deac_left_state">
                                <span v-if="this.data.unit[0].value < 1" style="color: #00fcff;">安全洁净</span>
                                <span v-if="this.data.unit[0].value == 1" style="color: #ffb301;">轻度污染</span>
                                <span v-if="this.data.unit[0].value > 1" style="color: #eb322c;">重度污染</span>
                              </p>
                            </div>
                          </div>
                          <div class="device_data_flex">
                            <div class="device_data_title">{{this.data.unit[4].name}}</div>
                            <div class="device_data_value">{{this.data.unit[4].value.toFixed(1)}}</div>
                            <div class="device_data_flag">{{this.data.unit[4].flag}}</div>
                          </div>
                          <div class="device_data_flex">
                            <div class="device_data_title">{{this.data.unit[11].name}}</div>
                            <div class="device_data_value">{{this.data.unit[11].value.toFixed(0)}}</div>
                            <div class="device_data_flag">{{this.data.unit[11].flag}}</div>
                          </div>
                          <div class="device_data_flex">
                            <div class="device_data_title">{{this.data.unit[6].name}}</div>
                            <div class="device_data_value">{{this.data.unit[6].value.toFixed(0)}}</div>
                            <div class="device_data_flag">{{this.data.unit[6].flag}}</div>
                          </div>
                          <div class="device_data_flex">
                            <div class="device_data_title">{{this.data.unit[2].name}}</div>
                            <div class="device_data_value">{{this.data.unit[2].value.toFixed(0)}}</div>
                            <div class="device_data_flag">{{this.data.unit[2].flag}}</div>
                          </div>
                        </div>
                        <div class="device_img">
                          <div class="device_img_box">
                            <img src="../../assets/deacidifier.png" alt="">
                          </div>
                        </div>
                        <div class="device_state">
                          <div class="deac_left">
                            <img src="../../assets/pan8.png" alt="" v-if="this.data.unit[1].value < 1">
                            <img src="../../assets/pan9.png" alt="" v-if="this.data.unit[1].value == 1">
                            <img src="../../assets/pan3.png" alt="" v-if="this.data.unit[1].value > 1">
                            <div class="deac_left_img">
                              <p class="deac_left_title">{{ this.data.unit[3].name }}</p>
                              <p class="deac_left_value">{{ parseFloat(this.data.unit[3].value).toFixed(0) }}</p>
                              <p class="deac_left_state">
                                <span v-if="this.data.unit[1].value < 1" style="color: #00fcff;">安全洁净</span>
                                <span v-if="this.data.unit[1].value == 1" style="color: #ffb301;">轻度粉尘</span>
                                <span v-if="this.data.unit[1].value > 1" style="color: #eb322c;">重度污染</span>
                              </p>
                            </div>
                          </div>
                          <div class="device_data_flex">
                            <div class="device_data_title">{{this.data.unit[10].name}}</div>
                            <div class="device_data_value">{{this.data.unit[10].value.toFixed(1)}}</div>
                            <div class="device_data_flag">{{this.data.unit[10].flag}}</div>
                          </div>
                          <div class="device_data_flex">
                            <div class="device_data_title">{{this.data.unit[12].name}}</div>
                            <div class="device_data_value">{{this.data.unit[12].value.toFixed(0)}}</div>
                            <div class="device_data_flag">{{this.data.unit[12].flag}}</div>
                          </div>
                          <div class="device_data_flex_speed">
                            <el-button :class="this.dataShow[27].value == 0 && this.dataShow[24].value != 0 ? 'deac_speed active':'deac_speed'" @click="switchOpen(27)">低速</el-button>
                            <!-- 关机时 -->
                            <svg
                              class="icon"
                              aria-hidden="true"
                              v-if="this.dataShow[24].value == 0"
                            >
                              <use xlink:href="#icon-fengshan" />
                            </svg>
                            <!-- 开机风速已开启正常高低速 -->
                            <svg
                              :class=" this.dataShow[27].value != 1 ? 'icon active_d' : 'icon active_g' "
                              aria-hidden="true"
                              v-if="this.dataShow[24].value != 0"
                            >
                              <use xlink:href="#icon-fengshan" />
                            </svg>
                            <el-button :class="this.dataShow[27].value == 1 && this.dataShow[24].value != 0 ? 'deac_speed active':'deac_speed'" @click="switchOpen(27)">高速</el-button>
                          </div>
                        </div>
                      </div>
                      <div class="airclean_bottom">
                        <div :class="this.dataShow[24].value == 0 ?'airclean_control':'airclean_control active'" @click="switchOpen(16)">
                          <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-guanji"></use>
                          </svg>
                          <span v-if="this.dataShow[24].value != 0">开机</span>
                          <span v-if="this.dataShow[24].value == 0">关机</span>
                        </div>
                        <div :class="this.dataShow[24].value == 24 ?'airclean_control active':'airclean_control'" @click="switchOpen(24)">
                          <svg class="icon shoudong" aria-hidden="true">
                            <use xlink:href="#icon-guangboshajun"></use>
                          </svg>
                          净化消毒
                        </div>
                        <div :class="this.dataShow[24].value == 20 ?'airclean_control active':'airclean_control'" @click="switchOpen(20)">
                          <svg class="icon shoudong" aria-hidden="true">
                            <use xlink:href="#icon-caozuo_jiashi"></use>
                          </svg>
                          持续除酸
                        </div>
                        <div :class="this.dataShow[24].value == 17 ? 'airclean_control active':'airclean_control'" @click="switchOpen(17)">
                          <svg class="icon shoudong" aria-hidden="true">
                            <use xlink:href="#icon-kaishi"></use>
                          </svg>
                          自动运行
                        </div>
                      </div>
                    </div>
                    <div class="temp_datar">
                      <div class="k8s_echart">
                        <div class="temp_pie_name">
                          <svg class="icon chart_icon" aria-hidden="true">
                              <use xlink:href="#icon-shujuquxianzoushiqushitubiaoshangshengxianxing"></use>
                          </svg>
                          数据分析
                        </div>
                        <div class="temp_echart_top">
                          <div class="tempChart">
                            <div class="tempChart_title">
                              <div class="tempChart_tishi1"></div>
                              {{this.data.unit[3].name}}
                            </div>
                            <div class="echarttong">
                              <echars :info="info" :id="3" :height="height" :color="color0" :background="background0" :reasMax="humireasMax" :reasMin="humireasMin" :fanwei="2419200" ref="childechart0"></echars>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="temp_datal_bottom">
                        <div class="temp_peak_mode">
                          <div class="temp_peak_name">
                            <i class="el-icon-s-data"></i>
                            峰值数据（{{this.data.unit[3].name}}）
                          </div>
                          <div class="temp_peak">
                            <div class="temp_peak_title">
                              <div class="temp_peak_title_max">Max</div>
                              <div class="temp_peak_title_min">Min</div>
                            </div>
                            <div class="temp_peak_left"></div>
                            <div class="temp_peak_right" >
                              <div class="temp_peak_flex">
                                <div class="temp_peak_humi_max"></div>
                                <div class="temp_peak_data"><span>{{this.shiMax.toFixed(1)}}</span><span class="temp_peak_data_flag">{{this.data.unit[3].flag}}</span></div>
                              </div>
                              <div class="temp_peak_flex">
                                <div class="temp_peak_humi_min"></div>
                                <div class="temp_peak_data"><span>{{this.shiMin.toFixed(1)}}</span><span class="temp_peak_data_flag">{{this.data.unit[3].flag}}</span></div>
                              </div>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                    </div>
                  </div>
                  <div class="data_bottom">
                      <div class="temp_time_mode">
                        <div class="temp_peak_name">
                          <i class="el-icon-time"></i>
                          时间统计
                        </div>
                        <div class="temp_time">
                          <div class="temp_time_line">
                            <p class="temp_warning_title">首次上线：</p>
                            <p class="temp_time_year">{{ this.firstconnecttimeYear }} </p> 
                            <p class="temp_time_hour">{{ this.firstconnecttimeHour}}</p>
                          </div>
                          <div class="temp_time_line" v-if="this.connecttime > 0">
                            <p class="temp_warning_title">最近上线：</p>
                            <p class="temp_time_year">{{ this.connecttimeYear }} </p>
                            <p class="temp_time_hour">{{ this.connecttimeHour }}</p>
                          </div>
                          <div class="temp_time_line" v-if="this.devtimeshow == 1">
                            <p class="temp_warning_title">累计时长：</p>
                            <p class="temp_time_h"> {{this.totaltime}} </p> <span class="temp_time_s"> h</span>
                          </div>
                        </div>
                      </div>
                      <div class="temp_time_mode temp_grade_mode">
                        <div class="grade_i" @click="ChangeGradeDiv()">
                          <i class="el-icon-caret-bottom"></i>
                        </div>
                        <div class="grade" v-if="this.gradeDiv == true">
                          <div :class="this.data.airlevelsource == 0 ? 'grade_level grade_active':'grade_level'" @click="ChangeGrad(0)">平均值</div>
                          <div :class="this.data.airlevelsource == 1 ? 'grade_level grade_active':'grade_level'" @click="ChangeGrad(1)">自身值</div>
                        </div>
                        <div class="temp_peak_name">
                          <i class="el-icon-stopwatch"></i>
                          空气等级
                        </div>
                        <div class="temp_grade">
                          <div :class="gradec">
                            <div class="temp_grade_title">空气等级</div>
                            <div class="temp_grade_down">
                              <div class="temp_grade_san"></div>
                            </div>
                            <div :class="grades">
                              <span>{{this.grade}}</span>
                            </div>
                          </div>
                          <div :class="gradec2">
                            <div class="temp_grade_title">粉尘等级</div>
                            <div class="temp_grade_down">
                              <div class="temp_grade_san"></div>
                            </div>
                            <div :class="grades2">
                              <span>{{this.grade2}}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="temp_pie_mode">
                        <div class="temp_pie_name">
                          <svg class="icon chart_icon" aria-hidden="true">
                              <use xlink:href="#icon-chucun"></use>
                          </svg>
                          储存空间
                        </div>
                        <div class="chart_pie" ref="chart4"></div>

                      </div>
                    </div> 
                </div>
              </div>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import $ from 'jquery';
import * as echarts from 'echarts'
import echars from '../overview/echars.vue';
export default {
  components:{echars},
  props: ["msg"],
  data() {
    return {
      alarmstate:0,//在线离线
      timeGetData:'',//接口方法的定时器
      data: "", //当前设备数据  真实数据
      dataShow: "", //当前设备数据  展示用数据
      dataor:1,//判断接口是否成功，1表示有返回成功，0表示失败，3之内无返回就置0表示失败
      chart4: null,
      switch:0,//开关
      clickGetData:'',//延迟保存计时器
      clickNumber:0,//延迟保存点击次
      // 峰值
      shiMax:0,
      shiMin:0,
      num:45,
      //属性数据
      firstconnecttimeYear:'',//首次上线年月日
      firstconnecttimeHour:'',//首次上线时分
      connecttime:0,//最近上线时间戳
      connecttimeYear:'',//最近上线年月日
      connecttimeHour:'',//最近上线时分
      totaltime:0,//累计运行时间
      devtimeshow:localStorage.getItem('累计时长'),//累计运行时间显示隐藏
      errorcount:0,//报警总数量
      valueerror:0,//数值报警
      connecterror:0,//链路报警
      valuecount:0,//累计记录条数
      recordcount:0,//剩余记录条数
      valuedisk:0,//存储空间磁盘容量比特
      // 曲线内容---
      humireasMax:0,//曲线合理区间，高低限范围
      humireasMin:0,//曲线合理区间，高低限范围
      color0:'#4fe33b',
      background0:'rgba(197,234,180,0.2)',
      historyNum:0,
      height:'330',
      // 曲线结束---
      localname:'',//本地储存名称
      //空气质量相关
      gradeDiv:false,
      gradec:'temp_grade_circle_you',
      grades:'temp_grade_data_you',
      grade:'优',
      gradec2:'temp_grade_circle_you',
      grades2:'temp_grade_data_you',
      grade2:'优',
      
    };
  },
  mounted() {
  },
  created() {
    // 判断是否是直接访问当前设备页面
    if(localStorage.getItem('当前访问路径') == 'overview2'){
      this.localname = "6.0展示设备卡片"
    }else{
      this.localname = "当前设备编号"
    }
    this.dataShow = JSON.parse(localStorage.getItem("menuDataJson")).unit
    this.data = JSON.parse(localStorage.getItem("menuDataJson"))
    // 曲线内容---
    this.info = JSON.parse(localStorage.getItem(this.localname))
    this.$nextTick(() => {
      this.$refs.childechart0.getCharts0()
      this.getCharts4()
    })
    // 曲线内容---
    this.getData(JSON.parse(localStorage.getItem(this.localname)))
    this.getDataStart()
  },
  methods: {
    //重新定时走接口
    getDataStart(){
      this.$nextTick(() => {
          this.timeGetData = setInterval(() => {
            if(this.dataor == 0){ //接口失败提示
              this.$message({
                message: '服务器访问失败',
                type: 'error',
                duration: 1000
              });
            }
            this.getData(JSON.parse(localStorage.getItem(this.localname)))
            this.dataor = 0
          }, 3000); 
      })
    },
    getData(info){
      // 曲线内容---
      this.info = info
      // 曲线内容---
      if(info.uid == null || info.uid == "null"){//清空缓存第一次进入时找不到info.uid，页面为空页面的处理
        info.uid = 0
      }
      var params = {
          "getdevinfo":[
            {
              "uid": info.uid,
              "type": info.type,
              "addr": info.addr,
              "unittype":"id-name-ready-value-flag-max-min-alarmhvalue-alarmhhvalue-alarmlvalue-alarmllvalue-valuemax-valuemin"
            }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
        this.dataor = 1// 接口成功置1
        if(res.data.getdevinfo == undefined){ //数据返回不全失败提示
          this.$message({
            message: '服务器访问失败',
            type: 'error',
            duration: 1000
          });
        }else{
          // res.data.getdevinfo[0].unit[32].value = 1
          if(this.clickNumber == 0){ // 延迟判断状态中不接受真实状态
            var st = []
            for(var a = 0; a < res.data.getdevinfo[0].unit.length; a++){
              st.push(
                {
                  id:res.data.getdevinfo[0].unit[a].id, 
                  value:res.data.getdevinfo[0].unit[a].value
                }
              )
            }
            this.dataShow = st;//展示状态
          }
          this.data = res.data.getdevinfo[0];
          this.alarmstate = res.data.getdevinfo[0].alarmstate
          // 上次上线时间
          this.firstconnecttimeYear = this.formatDate(this.data.firstconnecttime*1000, 'YYYY-MM-DD')
          this.firstconnecttimeHour = this.formatDate(this.data.firstconnecttime*1000, 'H:m')
          // 最近上线时间
          this.connecttime = this.data.connecttime
          this.connecttimeYear = this.formatDate(this.data.connecttime*1000, 'YYYY-MM-DD')
          this.connecttimeHour = this.formatDate(this.data.connecttime*1000, 'H:m')
          //累计运行时间 拿到的分钟转成小时
          this.devtimeshow = localStorage.getItem('累计时长')
          this.totaltime = this.data.totaltime != undefined ? (this.data.totaltime/60).toFixed(0) : 0
          //故障累计总条数
          this.errorcount = this.data.errorcount
          // 数据报警累计条数
          this.valueerror = this.data.valueerror
          //离线故障累计条数
          this.connecterror = this.data.connecterror
          //历史记录已记录条数
          this.valuecount = this.data.valuecount
          //剩余记录条数
          this.recordcount = this.data.recordmax-this.data.valuecount
          
          // 曲线内容---
          //计算曲线合理区间（高低限）
          this.humireasMax = (this.data.unit[3].alarmhvalue+this.data.unit[3].alarmhhvalue)/2
          this.humireasMin = (this.data.unit[3].alarmlvalue+this.data.unit[3].alarmllvalue)/2
          if(this.historyNum == 0){
            this.historyNum++
            this.getHisData()
          }
          // 曲线结束---
          // 空气质量
          this.data.tvocstate == undefined ? 0 : this.data.tvocstate
          if(this.data.tvocstate == 0){// 优
            this.grade = '优'
            this.gradec = 'temp_grade_circle_you'
            this.grades = 'temp_grade_data_you'
          }else if(this.data.tvocstate == 1){ //良
            this.grade = '良'
            this.gradec = 'temp_grade_circle_liang'
            this.grades = 'temp_grade_data_liang'
          }else if(this.data.tvocstate == 2){ //差
            this.grade = '一般'
            this.gradec = 'temp_grade_circle_cha'
            this.grades = 'temp_grade_data_cha'
          }
          this.data.pm25state == undefined ? 0 : this.data.pm25state
          if(this.data.pm25state == 0){// 优
            this.grade2 = '优'
            this.gradec2 = 'temp_grade_circle_you'
            this.grades2 = 'temp_grade_data_you'
          }else if(this.data.pm25state == 1){ //良
            this.grade2 = '良'
            this.gradec2 = 'temp_grade_circle_liang'
            this.grades2 = 'temp_grade_data_liang'
          }else if(this.data.pm25state == 2){ //差
            this.grade2 = '一般'
            this.gradec2 = 'temp_grade_circle_cha'
            this.grades2 = 'temp_grade_data_cha'
          }
          //峰值计算
          if(this.data.unit[3].valuemin == undefined || this.data.unit[3].valuemin == null){
            this.data.unit[3].valuemin = 0
          }
          if(this.data.unit[3].valuemax == undefined || this.data.unit[3].valuemax == null){
            this.data.unit[3].valuemax = 0
          }
          
          this.shiMin = this.data.unit[3].valuemin
          var shiMin = this.shiMin <= this.data.unit[3].min ? this.data.unit[3].min : this.shiMin //取最小范围值
          var shiMinB = ((shiMin+this.data.unit[3].min)/this.data.unit[3].max)*250 // 最小值范围~最大值范围取百分比，取占总长度120px的距离
          $('.temp_peak_humi_min').css('width',shiMinB+'px')
          this.shiMax = this.data.unit[3].valuemax
          var shiMax = this.shiMax >= this.data.unit[3].max ? this.data.unit[3].max : this.shiMax //取最大范围值
          var shiMaxB = ((shiMax+this.data.unit[3].min)/this.data.unit[3].max)*250 // 最小值范围~最大值范围取百分比，取占总长度120px的距离
          $('.temp_peak_humi_max').css('width',shiMaxB+'px')
          this.getCharts4()
        }
      })
    },
    //控制方法
    switchOpen(id){
      var value = 0;
      var index = 0
      if(id == 16){
        index = 24
        if(this.dataShow[24].value == 0){
          value = 16 //开机
        }else{
          value = 0 //关机
        }
      }else{
        if(this.dataShow[24].value == 0){
          this.$message({
              message: '设备未开机',
              type: 'error',
              duration: 1000
            });
            return false;
        }else{
          if(id == 27){//风速
            index = id
            if(this.dataShow[27].value == 0){
              value = 1
            }else{
              value = 0
            }
          }else{//其他控制
            index = 24
            if(this.dataShow[24].value == id){
              value = 16
            }else{
              value = id
            }
          }
        }
        
      }
      // 延迟保存方法
      clearInterval(this.clickGetData);
      this.clickGetData = null;
      this.clickNumber = 1;  //1秒后走逻辑，所以计时从1开始
      this.dataShow[index].value = value //修改展示状态值
      console.log('下发'+value)
      this.clickGetData = setInterval(() => { 
        this.clickNumber++;
        if(this.data.unit[index].value != this.dataShow[index].value){ // 返回的值和下发值不一致，等待返回
          console.log('错误等待'+this.clickNumber+'秒')
        }else{ // 返回的值和下发值一致，取消等待，拿取真实值
          console.log('正确')
          clearInterval(this.clickGetData);
          this.clickGetData = null;
          this.clickNumber = 0
        }
        if(this.clickNumber > this.$store.state.waittTime+1){ //等待5秒后，取消等待，拿取真实值 waittTime统一宏变量  计时从1开始，所以等待时间要再+1
          console.log('超时')
          clearInterval(this.clickGetData);
          this.clickGetData = null;
          this.clickNumber = 0
        }
      }, 1000); 
      var params = {
          "setdevinfo":[
              {
                  "uid": this.info.uid,
                  "type": this.info.type,
                  "addr": this.info.addr,
                  "unit":[
                    {
                      id: index,
                      value: value
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
          if(res.data.result == 'ok'){
              
          }else{
              this.$notify({
                  title: '操作失败',
                  type: 'warning',
                  duration: 1500
              });
          }
      });
    },
    //空气质量切换框打开关闭
    ChangeGradeDiv(val){
      if(val == 0){
        this.gradeDiv = false
      }else{
        this.gradeDiv = !this.gradeDiv
      }
    },
    //空气质量切换下发
    ChangeGrad(val){
      this.gradeDiv = false
      var params = {
        "setdevinfo":[
            {
                "uid": this.info.uid,
                "type": this.info.type,
                "addr": this.info.addr,
                "airlevelsource":val
            }
        ],
        [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
          if(res.data.result == 'ok'){
            this.$notify({
                  title: '操作成功',
                  type: 'success',
                  duration: 1500
              });
          }else{
              this.$notify({
                  title: '切换失败',
                  type: 'warning',
                  duration: 1500
              });
          }
      });
    },
    //历史曲线 
    getHisData(){
      this.$nextTick(() => {
        if(this.$refs.childechart0 != undefined){
          this.$refs.childechart0.getHisData()
        }
      })
    },
    getCharts4(){
      if (this.chart4 == null) {
        this.chart4 = echarts.init(this.$refs.chart4);
      }
      
      var option = {
        title: {
          show:false,
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '储存容量',
            type: 'pie',
            // radius: '80%',
            radius: ['50%', '70%'],
            // center: ['50%', '50%'],
            label: {
              color: '#fff',
              formatter:function(data){
	              return `${data.name} `
              }
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: '#000',
              borderWidth: 5,
              normal: {
                color: function (colors) {
                  var colorList = [
                    '#ffa618a3',
                    '#5eceffc4',
                  ];
                  return colorList[colors.dataIndex];
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            data: [
              { 
                value: this.valuecount, 
                name: '累计数量',
              },
              { 
                value: this.recordcount, 
                name: '剩余数量',
              },
            ],
          },
          {//重复为了既在中间显示百分比，也拉出边线来显示名称和值
            name: '储存容量',
            type: 'pie',
            // radius: ['50%', '80%'],
            radius: '70%',
            label: {
              color: '#fff',
              normal: {
                    show: true,
                    position: 'inside',
                    formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
                   textStyle : {                   
                      align : 'center',
                      baseline : 'middle',
                      fontFamily : '微软雅黑',
                      fontSize : 15,
                      color:'#fff',
                      fontWeight : 'bolder'
                    }
                },
            },
            labelLine: {
              length: 10, // Length of line from pie to label
              length2: 20, // Distance from pie to start of line
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: '#000',
              borderWidth: 5,
              normal: {
                color: function (colors) {
                  var colorList = [
                    '#ffa61878',
                    '#5eceff57',
                  ];
                  return colorList[colors.dataIndex];
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            data: [
            { 
                value: this.valuecount, 
                name: '累计数量 ',
                itemStyle: {
                  borderColor: '#ffa61878',
                  borderWidth: 2,
                } 
              },
              { 
                value: this.recordcount, 
                name: '剩余数量',
                itemStyle: {
                  borderColor: '#5eceffc4',
                  borderWidth: 2,
                } 
              },
            ],
          }
        ]
      };
      this.chart4.setOption(option);
    },
  },
  // 清除定时器
    beforeDestroy() {
        clearInterval(this.timeGetData);
        this.timeGetData = null;
        // 下发控制计时器
        clearInterval(this.openGetData);
        this.openGetData = null;
        clearInterval(this.clickGetData);
        this.clickGetData = null;
    },
};
</script>

<style scoped>
.el-card {
  background: none;
  color: #fff;
  border: 1px solid rgba(89, 129, 165, 0.4);
}
/deep/ .el-card__header {
  background: rgba(89, 129, 165, 0.2);
  padding: 16px 20px;
  border-bottom: none;
}
.box-card {
  /* overflow: hidden; */
}
.temp_card{
  height: 850px;
}
.clearfix{
  font-size: 18px;
}
.shebeiname{
  font-weight: bold;
}
/* 数据 */
.temp_data{
  height: 805px;
}
.temp_datal{
  display: flex;
}
.temp_datar{
  width: 490px;
  margin-left: 20px;
}
.device_border{
  width: 1024px; 
  height: 600px;
  margin-top: 2px;
  border: 1px solid #5981a566;
  box-shadow: 0px 0px 12px #b4e9ff73;
  border-radius: 10px;
}
.airclean_top{
  width: 100%;
  height: 505px;
  border-bottom: 1px solid #5981a566;
  display: flex;
}
.device_data{
  width: 348px;
}
.deac_left{
  width: 100%;
  height: 200px;
  margin-top: 40px;
  margin-bottom: 20px;
  text-align: center;
  position: relative;
}
.deac_left img{
  height: 100%;
  width: auto;
}
.deac_left_img{
  position: absolute;
  width: 100%;
  text-align: center;
  top: 60px;
}
.deac_left_title{
  font-size: 22px;
}
.deac_left_value{
  font-size: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.deac_left_state{
  font-size: 22px;
}
.device_data_flex{
  display: flex;
  align-items: self-end;
  height: 45px;
  margin-bottom: 10px;
}
.device_data_title{
  width: 150px;
  text-align: right;
  padding-right: 30px;
  font-size: 18px;
}
.device_data_value{
  width: 70px;
  font-size: 24px;
  color: #00fff6;
  font-weight: lighter;
  position: relative;
  top: 3px;
}
.device_data_flag{
  font-size: 18px;
  padding-left: 10px;
}
.device_img{
  width: 329px;
  border-left: 1px solid #5981a566;
  border-right: 1px solid #5981a566;
}
.device_img_box{
  height: 425px;
  margin-top: 40px;
  text-align: center;
}
.device_img_box img{
  height: 100%;
}
.device_state{
  width: 347px;
}
.device_data_flex_speed{
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: self-end;
  height: 90px;
  justify-content: space-around;
}
.deac_speed{
  background: none;
  border: 1px solid #ffffff4f;
  color: #fff;
  font-size: 20px;
}
.device_data_flex_speed .icon{
  font-size: 90px;
  position: relative;
  top: 23px;
}
.active_g {
  animation: myrotate infinite 1s;
  animation-timing-function: linear;
}
.active_d {
  animation: myrotate infinite 3s;
  animation-timing-function: linear;
}
.airclean_bottom{
  width: 100%;
  height: 95px;
  display: flex;
  justify-items: center;
}
.airclean_control{
  width: 255px;
  height: 95px;
  border-left: 1px solid #5981a599;
  line-height: 95px;
  font-size: 22px;
  text-align: center;
  cursor: pointer;
}
.airclean_bottom .airclean_control:first-child{
  border-left: none;
  border-bottom-left-radius: 10px;
}
.airclean_bottom .airclean_control:last-child{
  border-bottom-right-radius: 10px;
}
.active{
  background: #5981a599;
}
.shoudong{
  font-size: 28px;
}
/* 曲线 */
.k8s_echart{
  width: 490px;
  height: 320px;
  border-radius: 10px;
  margin-top: 2px;
  background: #0000002b;
}
.temp_pie_name{
  font-size: 18px;
  padding-top: 20px;
  padding-left: 30px;
}
.chart_icon{
  font-size: 20px;
}
.temp_echart_top{
  display: flex;
  margin-left: 10px;
}
.tempChart{
  width: 500px;
  position: relative;
  top: -20px;
}
.tempChart_title{
  width: 100px;
  position: absolute;
  top: 20px;
  right: 22px;
  display: flex;
  align-items: center;
}
.tempChart_tishi1{
  width: 25px;
  height: 10px;
  background: #4fe33b;
  margin-right: 5px;
}
.tempChart_tishi2{
  width: 25px;
  height: 10px;
  background: #ffa618;
  margin-right: 5px;
}
.chart_detail {
  width: 100%;
  height: 250px;
  position: relative;
}
/* 峰值 */
.temp_datal_bottom{
  width: 861px;
  display: flex;
}
.temp_peak_mode{
  width: 490px;
  height: 260px;
  padding-top: 20px;
  border-radius: 10px;
  background: #0000002b;
  margin-right: 20px;
  margin-top: 20px;
}
.temp_peak_name{
  width: 100%;
  font-size: 18px;
  margin-left: 30px;
}
.temp_peak{
  display: flex;
  margin-top: 35px;
  margin-left: 35px;
}
.temp_peak_title{
  height: 150px;
  width: 30px;
  margin-right:10px;
}
.temp_peak_title_max{
  height:75px;
  line-height: 75px;
}
.temp_peak_title_min{
  height:72px;
  line-height: 72px;
}
.temp_peak_left{
  height: 150px;
  width: 1px;
  background: #d4d3d3;
}
.temp_peak_right{
  height: 150px;
  width: 370px;
  padding-top: 22px;
}
.temp_peak_flex{
  display: flex;
  align-items: center;
  margin-bottom: 43px;
  transform-origin: left top;
  transition: transform 1s;
  cursor: pointer;
}
.temp_peak_flex:hover{
  transform: scale(1.2);
}
.temp_peak_flex:last-child{
  margin-bottom: 0px;
}
.temp_peak_humi_max{
  width: 0px;
  height: 30px;
  transition: width 1s;
  background: linear-gradient(to right,#b5e5c2,#4fe33b);
}
.temp_peak_humi_min{
  width: 0px;
  height: 30px;
  transition: width 1s;
  background: linear-gradient(to right,#b5e5c2,#4fe33b);
}
.temp_peak_data{
  margin-left: 10px;
  text-align: center;
}
.temp_peak_data_flag{
  font-size: 12px;
  color: #969696;
  margin-left: 5px;
}
/* 下方综合数据 */
.data_bottom{
  display: flex;
}
/* 在线时间 */
.temp_time_mode{
  width: 466px;
  height: 235px;
  padding-top: 20px;
  border-radius: 10px;
  background: #0000002b;
  margin-right: 44px;
  margin-top: 20px;
}
.temp_time{
  height: 145px;
  margin-top: 20px;
  margin-left: 40px;
  display: flex;
  margin-right: 30px;
  color: #d4d3d3;
  flex-wrap: wrap;
  align-items: center;
}
.temp_time_line{
  width: 100%;
  margin-bottom: 27px;
  position: relative;
  top: 9px;
  display: flex;
}
.temp_warning_title{
  color: #d4d3d3;
}
.temp_time .temp_warning_title{
  width: 90px;
}
.temp_time_year{
  width: 160px;
  font-family: electronicFont;
  font-size: 28px;
  color: #5eceff;
}
.temp_time_hour{
  width: 65px;
  font-family: electronicFont;
  font-size: 28px;
  color: #5eceff;
}
.temp_time_h{
  font-family: electronicFont;
  font-size: 28px;
  color: #5eceff;
  position: relative;
  top: -5px;
}
.temp_time_s{
  color: #5eceff;
  margin-left: 5px;
}
/* 空气等级 */
.temp_grade_mode{
  margin-right: 44px;
  width: 490px;
  position: relative;
}
.grade_i{
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  z-index: 2;
}
.grade{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 123px;
  background: #273a56c4;
  border: 1px solid #70707063;
  z-index: 1;
}
.grade_level{
  text-align: center;
  line-height: 50px;
  height: 50px;
  cursor: pointer;
}
.grade_active{
  background: #4e9cca8f;
}
.grade_level:first-child{
  height: 70px;
  line-height: 80px;
  width: 100%;
  border-bottom: 1px dashed #70707063;
}
.temp_grade{
  padding: 0px 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 17px;
}
.temp_grade_circle_you{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid #90fe906e;
  box-shadow: inset 0 0px 15px #4fe33ba8; /* 添加半透明阴影 */
  animation: shadowPulse1 4s infinite; /* 动画 */
}
.temp_grade_circle_liang{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid #5eceffad;
  box-shadow: inset 0 0px 15px #5eceffa8; /* 添加半透明阴影 */
  animation: shadowPulse2 4s infinite; /* 动画 */
}
.temp_grade_circle_cha{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid #ffa618ad;
  box-shadow: inset 0 0px 15px #ffa618a8; /* 添加半透明阴影 */
  animation: shadowPulse3 4s infinite; /* 动画 */
}
/* 动画关键帧 */
@keyframes shadowPulse1 {
  0%, 100% {
    box-shadow: inset 0 0 15px #4fe33ba8;
  }
  50% {
    box-shadow: inset 0 0 40px #4fe33ba8;
  }
}
@keyframes shadowPulse2 {
  0%, 100% {
    box-shadow: inset 0 0 15px #5eceffa8;
  }
  50% {
    box-shadow: inset 0 0 40px #5eceffa8;
  }
}
@keyframes shadowPulse3 {
  0%, 100% {
    box-shadow: inset 0 0 15px #ffa618a8;
  }
  50% {
    box-shadow: inset 0 0 40px #ffa618a8;
  }
}
.temp_grade_title{
  width: 120px;
  height: 50px;
  line-height: 60px;
  margin: 0 auto;
  border-bottom: 1px solid #fff;
  text-align: center;
}
.temp_grade_down{
  width: 15px;
  height: 15px;
  margin: 0 auto;
  position: relative;
}
.temp_grade_san{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* 居中对齐三角形 */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #ffffffab; /* 调整颜色和尺寸以匹配您的需求 */
}
.temp_grade_data_you{
  text-align: center;
  line-height: 50px;
  font-size: 32px;
  color: #4fe33b;
}
.temp_grade_data_liang{
  text-align: center;
  line-height: 50px;
  font-size: 32px;
  color: #5eceff;
}
.temp_grade_data_cha{
  text-align: center;
  line-height: 50px;
  font-size: 32px;
  color: #ffa618;
}


/* 储存空间 */
.temp_pie_mode{
  width: 490px;
  height: 235px;
  border-radius: 10px;
  background: #0000002b;
  position: relative;
  margin-top: 20px;
}
.temp_pie_name{
  font-size: 18px;
  padding-top: 20px;
  padding-left: 30px;
}
.chart_pie{
  width: 490px;
  height: 180px;
  position: relative;
  top: -10px;
}
.chucun_disk{
  position: absolute;
  top: 20px;
  right: 30px;
}
</style>